<template>
	<view @click.stop="handleOuterClick" class="index_blog">
		<view @click.stop="deleteBlog(item)" v-if="item.userId == uid" class="edit">删除</view>
		<view @click.stop="reportBlog(item)" v-if="item.userId != uid" class="edit">举报</view>
		<view @click.stop="show1=true" v-if="sh" class="sh">
			<view v-if="item.reviewFlag==0">未审核</view>
			<view v-if="item.reviewFlag==1">审核通过</view>
			<view v-if="item.reviewFlag==2">审核不通过</view>
		</view>
		<!-- 个人信息 -->
		<view class="user_container">
			<u-avatar @click.stop="handleUserInfo(item)" :src="item.icon" size="90"></u-avatar>
			<view class="user_info">
				<view class="title">
					<view class="title_info">
						{{item.name}}
					</view>
					<view v-if="!item.userId==store.state.app.uid">
						<view @click.stop="handleFollow" v-if="isfollow"
							:class="item.isFollowed?'cancel_square':'title_square'">
							{{item.isFollowed?'取关':'关注'}}
						</view>
					</view>

				</view>
				<view class="time_square">
					{{Timeformat(item.createTime)}}
				</view>
			</view>
		</view>
		<!-- 帖子详情 -->
		<view class="posts_index">
			<view class="">
				<view class="posts_title">
					{{item.title}}
				</view>
				<view @click.stop="handleOuterClick" class="posts_content">
					{{item.content}}
				</view>
			</view>

			<!-- 图片相册 -->
			<view class="album__content">
				<image @click.stop="showImage(index)" style="width: 100px;" v-for="(item,index) in getUrls(item.images)"
					:key="index" :src="item" mode="widthFix"></image>
				<!-- <u-album @click.stop class="" style="display: flex;flex-direction: column" :urls="getUrls(item.images)"></u-album> -->
			</view>
			<view v-if="showComment" class="comment_index">
				<u-avatar @click.stop :src="userInfo.avatar" fontSize="1rem" size="50" randomBgColor></u-avatar>
				<view class="ipt_square">
					<u-input @focus="inputFocus" ref="inputBox" @click.stop="onInputClick" placeholder="请输入内容" clearable
						iconSize="80" v-model="keywords">
						<template slot="suffix">
							<u-button @click.stop="handleComment" text="发送" type="success" size="small">
							</u-button>
						</template>
					</u-input>
				</view>
			</view>
			<!-- 尾部 -->
			<view class="action_index">
				<view class="item_action">
					<u-icon name="eye" size="40"></u-icon>
					<span>{{item.readNumber}}</span>
				</view>
				<view class="item_action">
					<u-icon name="chat" size="40"></u-icon>
					<span>{{item.comments}}</span>
				</view>
				<view @click.stop="likeBlogHandle" class="item_action">
					<u-icon :name="item.isLike?'heart-fill':'heart'" :color="item.isLike?'red':''"
						size="40"></u-icon>
					<span>{{item.liked}}</span>
				</view>
			</view>
		</view>
		<template v-if="commentList.length">
			<view  v-for="(comment, index) in commentList" :key="index" >
				<AComment :comment="comment"/>
			</view>
		</template>
		<u-modal @confirm="reason" :show="show1" title="不通过原因"
			:content='item.reason'></u-modal>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";

	import store from '@/store';
	import {
		likeBlog,
		addComment,
		follow,
		deleteBlogById,
		likeComment,
		deleteCommentById,
		reportCommentById,
		reportBlogById
	} from '@/api/forum.js'
	import {
		login
	} from "../../api/public";
import { getUserInfo } from "../../api/user";
	export default {
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		props: {
			item: {
				default: () => [],
			},
			sh:{
				default: false,
			},
			isfollow: {
				default: false,
			},
			showComment: {
				default: false
			},
			commentList: {
				default: () => []
			}
		},
		data() {
			return {
				show1:false,
				blogLikeParam: {
					isLike: false,
					liked: 0
				},
				id: null,
				keywords: null,
				commentData: {
					blogId: '',
					parentId: '',
				},
				popItem: {},
				showpop: false,
				rebackContent: '',
				btnStyle: {
					margin: '40rpx 0 0 80%',
					padding: '0 20rpx',
					width: '18%',
					float: 'right',
					fontSize: '1.2rem',
					borderRadius: '15%',
					color: '#fff',
					backgroundColor: 'rgb(60, 156, 255)',
				},
				preventClick: false,
				popupOpen: false,
				textareaStyle: {}
			}
		},
		methods: {
			likeBlogHandle() {
				likeBlog(this.item.id).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: "none",
							title: res.message,
						});
						uni.$emit('getCommentList',this.item.id)
						uni.$emit('reloadlist')
					}
				}).catch(error => {
					uni.showToast({
						icon: "none",
						title: "点赞失败，请重试",
					});
				});
			},
			inputFocus(e) {
				this.inputFocus = true
			},
			onInputClick(e) {
				e.stopPropagation()
			},
			handleOuterClick() {
				if (!this.showpop && !this.preventClick && (!this.inputFocus || !this.showComment)) {
					this.handleDetail();
				}
			},
			openPop(e, item) {
				this.showpop = true;
			},
			closePop() {
				this.showpop = false;
				this.preventClick = true; // 关闭时阻断外层点击
				setTimeout(() => {
					this.preventClick = false;
				}, 200);
			},
			deleteBlog(val){
				wx.showModal({
					title: '你确定要删除该条帖子吗？',
					success: (res) => {
						if (!res.confirm) return
						wx.showLoading()
						deleteBlogById(val.id).then(res => {
							uni.$emit('reloadlist')
							wx.showToast({
								title: res.message
							})
							wx.hideLoading()
						})
					}
				})
			},
			reportBlog(val){
				wx.showModal({
					title: '你确定要举报该条帖子吗？',
					success: (res) => {
						if (!res.confirm) return
						wx.showLoading()
						reportBlogById(val.id).then(res => {
							uni.$emit('reloadlist')
							wx.showToast({
								title: res.message
							})
							wx.hideLoading()
						})
					}
				})
			},
			reason(){
				this.show1=false
				uni.navigateTo({
					url:'/pages/forum/post/post?post='+ encodeURIComponent(JSON.stringify(this.item)),
				})
			},
			longPressHandle() {
				if (this.item.userId == this.$store.getters.uid) {
					wx.showActionSheet({
						itemList: ['删除'],
						success: (res) => {
							if (res.tapIndex == 0) {
								wx.showModal({
									title: '你确定要删除该条帖子吗？',
									success: (res) => {
										if (!res.confirm) return
										wx.showLoading()
										deleteBlogById(this.item.id).then(res => {
											uni.$emit('reloadlist')
											wx.showToast({
												title: res.message
											})
											wx.hideLoading()
										})
									}
								})
							}
						},
						fail(res) {
							console.log(res.errMsg)
						}
					})

				}
			},
			handleFollow() {
				follow(this.item.userId, !this.item.isFollowed).then(res => {
					if (res.code === 200) {
						uni.$emit('reloadlist')
					}

				})
			},
			showImage(index) {
				let img = this.getUrls(this.item.images)
				wx.previewImage({
					current: img[index],
					urls: [...img]
				})
			},
			getUrls(images) {
				if (images == "") return null
				return images?.split(',') || images
			},
			handleComment() {
				if (this.keywords == "" || !this.keywords) {
					uni.showToast({
						icon: 'none',
						title: '请输入内容'
					})
					return
				}
				this.commentData.blogId = this.item.id
				this.commentData.parentId = 0

				uni.getProvider({
					service: 'oauth'
				}).then(providerData=>{
					let provider = providerData[1].provider[0]
					uni.login({
						provider: provider,
					}).then(codeData=>{
						let code = codeData[1].code
						this.addCommentHandle({
							...this.commentData,
							'content': this.keywords,
							code
						})
					})
				})
				
			},
			addCommentHandle(data) {
				addComment(data).then(res => {
					if (res.code === 200) {
						this.keywords = ""
						// 父组件需重新加载
						uni.$emit('getCommentList', data.blogId)
						this.showpop = false
						// 跳转至详情
						// uni.navigateTo({
						// 	url: `/pages/forum/detail/blogDetail?id=${this.item.id}`
						// })
					}
				}).catch(err=>{
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
			},
			handleUserInfo(item) {
				let jsonString = JSON.stringify(item)
				let encodeURIComponentStr = encodeURIComponent(jsonString)
				uni.navigateTo({
					url: `/pages/forum/userhome/userhome?item=${encodeURIComponentStr}`
				})
			},
			handleDetail() {
				if (this.popupOpen) {
					return;
				}
				uni.navigateTo({
					url: `/pages/forum/detail/blogDetail?id=${this.item.id}`
				})
			},
			// 时间格式化
			Timeformat(isoTimeStr) {
				const date = new Date(isoTimeStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} 发布`;
			},
			// 点赞评论
			
		}
	}
</script>

<style scoped lang="scss">
	.index_blog:first-child {
		margin-top: 0;
	}

	.index_blog {
		position: relative;
		background-color: #fff;
		width: 100%;
		padding: 20rpx 40rpx;
		margin: 20rpx 0;

		.edit{
			position: absolute;
			top: 20rpx;
			right: 100rpx;
		}
		.sh{
			z-index: 100;
			position: absolute;
			bottom: 65rpx;
			right: 35rpx;
		}
		
		.user_container {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user_avatar {
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				// background-color: #ccc;
				// border: 1px solid #ccc;
				border-radius: 50%;
			}

			.user_info {
				margin-left: 20rpx;
				width: 100%;
				flex-wrap: wrap;
				row-gap: 10px;

				.title {
					display: flex;
					letter-spacing: 0.1rem;
					margin-bottom: 10rpx;

					.title_info {
						font-size: 1.2rem;
						color: #f86f5c;
					}

					.title_square {
						padding: 10rpx 20rpx;
						background-color: #fb7299;
						margin-left: 20rpx;
						border-radius: 10rpx;
						color: #fff;
						font-size: 1rem;
					}

					.cancel_square {
						padding: 10rpx 20rpx;
						background-color: #fb7299;
						margin-left: 20rpx;
						border-radius: 10rpx;
						color: #fff;
						font-size: 1rem;
					}


				}


			}
		}

		.time_square {
			color: #adadad;
			letter-spacing: 0.125rem;
		}

		.popContent {
			margin: 30rpx 10rpx;
			display: flex;
			// flex-wrap: wrap;
			flex-direction: column;
			// align-items: flex-end;
			// row-gap: 20rpx;

			::v-deep .u-textarea__field {
				// font-size: 1.85rem !important;
			}
		}

		.comment_index_container {
			margin: 40rpx 0;
		}

		.posts_index {
			padding: 30rpx 0 0 0;
			position: relative;
			
			.edit{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
			

			.posts_title {
				font-size: 1.25rem;
				margin: 0 0 20rpx 0;
			}

			.posts_content {
				font-size: 1rem;
				letter-spacing: 0.12rem;
				line-height: 1.4rem;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.album__content {
				margin: 20rpx 0 0 0;
				width: 100%;

				.u-album .u-album__row .u-album__row__wrapper img {
					width: 100px !important;
					height: 100px !important;
				}

				.album {
					@include flex;
					align-items: flex-start;

					&__avatar {
						background-color: $u-bg-color;
						padding: 5px;
						border-radius: 3px;
					}

					&__content {
						margin-left: 10px;
						flex: 1;
					}

					&__row image {
						width: 200rpx;
					}
				}
			}

			.comment_index {
				margin: 30rpx 0 0 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ipt_square {

					margin-left: 20rpx;
					width: 100%;
				}
			}

			.action_index {
				margin: 20rpx 0 0 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.item_action {
					display: flex;
					column-gap: 10px;
				}
			}

			.comment_second {
				display: flex;
				flex-direction: column;
				padding: 20rpx 40rpx 0 40rpx;

				.user_commentcontent {
					justify-content: flex-start;
					align-items: center;
					display: flex;

					view {
						padding: 0 20rpx;
					}
				}
			}
		}
	}
</style>